<template>
  <div class="app-container">
		
		<div style="background-color: aliceblue; padding: 20px 10px;border-radius: 8px;">
			<el-form ref="functionalModelRef" :model="form" :rules="rules" label-width="120px">
				<el-row :gutter="20">
			    <el-col :span="12">
			      <el-form-item label="选择项目" prop="projectSystemId">
			        <el-select v-model="form.projectSystemId" placeholder="请选择项目类型" style="width: 100%">
			          <el-option
			            v-for="item in projectSystemList"
			            :key="item.id"
			            :label="item.name"
			            :value="item.id"
			          ></el-option>
			        </el-select>
			      </el-form-item>
			    </el-col>
			    <el-col :span="12">
			      <el-form-item label="选择功能分析" prop="functionalAnalysisId">
			        <el-select v-model="form.functionalAnalysisId" placeholder="请选择项目类型" style="width: 100%">
			          <el-option
			            v-for="item in functionalAnalysisList"
			            :key="item.id"
			            :label="item.name"
			            :value="item.id"
			          ></el-option>
			        </el-select>
			      </el-form-item>
			    </el-col>
				</el-row>
				<el-row :gutter="20">
			    <el-col :span="12">
			      <el-form-item label="功能载体" prop="sourceId">
			        <el-select v-model="form.sourceId" @change="sourceIdChange" placeholder="请选择项目类型" style="width: 100%">
			          <el-option
			            v-for="item in componentAnalysisList"
			            :key="item.id"
			            :label="item.name"
			            :value="item.id"
			          ></el-option>
			        </el-select>
			      </el-form-item>
			    </el-col>
					<el-col :span="12">
					  <el-form-item label="功能对象" prop="targetId">
					    <el-select v-model="form.targetId" placeholder="请选择项目类型" style="width: 100%">
					      <el-option
					        v-for="item in targetOptions"
					        :key="item.id"
					        :label="item.name"
					        :value="item.id"
					      ></el-option>
					    </el-select>
					  </el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="功能名称" prop="functionalName">
						  <el-input v-model="form.functionalName" placeholder="请输入功能箭头名称" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
			    <el-col :span="12">
			      <el-form-item label="功能分类" prop="functionalType">
							<el-select v-model="form.functionalType" placeholder="请选择">
							  <el-option label="有用" value="有用"></el-option>
								<el-option label="有害" value="有害"></el-option>
							</el-select>
						</el-form-item>
			    </el-col>
					<el-col :span="12">
					  <el-form-item label="性能水平" prop="functionalType">
							<el-select v-model="form.functionalLevel" placeholder="请选择">
							  <el-option label="不足" value="不足"></el-option>
								<el-option label="正常" value="正常"></el-option>
								<el-option label="过量" value="过量"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
				  <el-col :span="24">
				    <el-form-item label="功能描述" prop="description">
				      <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
				    </el-form-item>
				  </el-col>
				</el-row>
				<!-- 
				<el-row :gutter="20">
					<el-col :xs="24" :sm="24">
						<el-form-item label="图片" prop="files">
							<image-upload v-model="form.files" :limit="5"/>
						</el-form-item>
					</el-col>
				</el-row>
				 -->
			</el-form>
			<div style="text-align: right;">
				<el-button v-if="form.id" type="success" @click="submitForm">修 改</el-button>
				<el-button v-else type="primary" @click="submitForm">增 加</el-button>
				<el-button type="default" @click="reset">重 置</el-button>
			</div>
		</div>
		
		<!-- 列表 -->
    <el-table v-loading="loading" :data="functionalModelList" @row-click="handleRowClick"   >
      <el-table-column label="序号" align="center" width="55" type="index" />
			<el-table-column label="项目名称" align="center" prop="projectSystemName" show-overflow-tooltip />
			<el-table-column label="功能分析名称" align="center" prop="functionalAnalysisName" show-overflow-tooltip/>
      <el-table-column label="作用组件" align="center" prop="sourceName" show-overflow-tooltip/>
      <el-table-column label="目标组件" align="center" prop="targetName" show-overflow-tooltip/>
      <el-table-column label="作用名称" align="center" prop="functionalName" show-overflow-tooltip/>
      <el-table-column label="功能类型" align="center" prop="functionalType" show-overflow-tooltip/>
      <el-table-column label="功能等级" align="center" prop="functionalLevel" show-overflow-tooltip/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
        </template>
      </el-table-column>
      <template #empty>
        <el-empty />
      </template>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

	</div>
</template>

<script setup name="FunctionalModel">
import { listFunctionalModel, getFunctionalModel, delFunctionalModel, addFunctionalModel, updateFunctionalModel } from "@/api/business/functionalModel"
import { listFunctionalAnalysis } from "@/api/business/functionalAnalysis"
import { listProjectSystem } from "@/api/business/projectSystem"
import { queryComponentAnalysisList, selectInteractionList } from "@/api/business/componentAnalysis"
// import { listComponentInteraction } from "@/api/business/componentInteraction"

import { useRoute } from 'vue-router'
import store from "@/store"



const userName = store.state.value.user.name;//当前登陆用户
const route = useRoute()
const { proxy } = getCurrentInstance()
const functionalModelList = ref([])
const loading = ref(true)
const total = ref(0)
const projectSystemList = ref([])
const functionalAnalysisList = ref([])
const componentAnalysisList = ref([])
const targetOptions = ref([])
const params = ref({
	pageNum: 1,
	pageSize: 1000,
	projectId: route.query.id,
	createBy: userName
})

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
		projectId: route.query.id,
		createBy: userName
  },
  rules: {
		projectSystemId: [
		  { required: true, message: "项目不能为空", trigger: "blur" }
		],
		functionalAnalysisId: [
		  { required: true, message: "功能分析不能为空", trigger: "blur" }
		],
    sourceId: [
      { required: true, message: "作用组件不能为空", trigger: "blur" }
    ],
    targetId: [
      { required: true, message: "目标组件不能为空", trigger: "blur" }
    ],
		functionalName: [
		  { required: true, message: "作用名称不能为空", trigger: "blur" }
		],
		functionalType: [
		  { required: true, message: "功能分类不能为空", trigger: "blur" }
		],
		functionalLevel: [
		  { required: true, message: "性能水平不能为空", trigger: "blur" }
		],
  }
})

const { queryParams, form, rules } = toRefs(data)

/** 查询功能建模列表 */
function getList() {
  loading.value = true
  listFunctionalModel(queryParams.value).then(response => {
    functionalModelList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

//项目系统
function getProjectSystemList() {
  listProjectSystem(params.value).then(response => {
    projectSystemList.value = response.rows
  })
}
// 功能分析 
function getFunctionalAnalysisList() {
  listFunctionalAnalysis(params.value).then(response => {
    functionalAnalysisList.value = response.rows
  })
}
// 组件分析 
function getComponentList() {
	const data = {
		"projectId": route.query.id,
		"createBy": userName
	}
  queryComponentAnalysisList(data).then(res => {
		console.log(res.rows)
    componentAnalysisList.value = res.rows.map(item => ({
	      id: item.id,
	      name: item.name
	    })
		)
  })
}


//根据选择的作用组件去查找“相互作用力”中与它有关联的组件
function sourceIdChange(){
	if(form.value.sourceId == null){
		return false;
	}
	const data = {
		"projectId": route.query.id,
		"sourceId": form.value.sourceId,
		"createBy": userName
	}
	targetOptions.value = [];//先清空对象
	selectInteractionList(data).then(res => {
		targetOptions.value = res.rows;
	})
}


// 表单重置
function reset() {
  form.value = {
    id: null,
		projectId: route.query.id,
		projectSystemId: null,
		functionalAnalysisId: null,
    sourceId: null,
    targetId: null,
    functionalName: null,
    functionalType: null,
    functionalLevel: null,
    functionalScore: null,
    description: null,
    files: null,
    remark: null,
    createBy: userName,
    createTime: null,
    updateBy: null,
    updateTime: null
  }
  proxy.resetForm("functionalModelRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}


//点击行 - 编辑
function handleRowClick(row, column, event) {
    // row: 当前行的数据对象
    // column: 当前列的配置信息
    // event: 原生事件对象
		form.value = row;
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id;
  getFunctionalModel(_id).then(response => {
    form.value = response.data
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["functionalModelRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateFunctionalModel(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          getList()
        })
      } else {
        addFunctionalModel(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除【' + row.projectSystemName + '】的数据项？').then(function() {
    return delFunctionalModel(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}



onMounted(() =>{
	reset();
	getList();
	
	getProjectSystemList();//项目系统列表
	getFunctionalAnalysisList();//功能分析列表
	getComponentList();//组件列表；
})

</script>
